import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Input, DatePicker, Button} from 'antd';
import action from '../../store/actions/goodsLibrary';
// import MySelect from '../codeLibrary/MySelect';
import moment from 'moment';
import 'moment/locale/zh-cn';
import './Searchs.scss';

const {Search} = Input;
const {RangePicker} = DatePicker;
moment.locale('zh-cn');

class Searchs extends Component {
  state = {
    invcode_stock: '', // 物料编码
    min_create_at: '', // 开始时间
    max_create_at: '', // 结束时间
    name: '',// 商品名称
    cate_code: '', // 物料组编码
    page_size: 10, //	页码
    attcmp: '', // 所属公司
    page: 1,

    myAttcmp: [],
    myRangePicker: '', // 日期数组
    attcmpArr: [{
      name: '长春文德孚',
      id: '1'
    }, {
      name: '吉林文德孚',
      id: '2'
    }]
  };
  // 日期开始


  myRangePicker = async (date, dateString) => {
    const temp = dateString.map(item => {
      return `${item} 00:00:00`;
    });
    await this.setState(prevState => {
      return {
        myRangePicker: date,
        min_create_at: temp[0], // 开始时间
        max_create_at: temp[1] // 结束时间
      };
    });

    await this.seachGoods();

  };

  // 日期结束
  // --------------change事件的开始
  onSearchNameChange = e => {
    this.setState({
      name: e.target.value
    });
  };
  onSearchInvcodeChange = e => {
    this.setState({
      invcode_stock: e.target.value
    });
  };
  onSearchCodeChange = e => {
    this.setState({
      cate_code: e.target.value
    });
  };
  // --------------change事件的结束
  // 名字搜索
  onSearchName = async (value, e) => {
    await this.setState({
      invcode_stock: '',
      cate_code: ''
    });
    await this.seachGoods();
  };

  // 物料编码搜索
  onSearchInvcode = async value => {

    await this.setState({
      name: '',
      cate_code: ''
    });
    await this.seachGoods();
  };

  // 物料组编码搜索
  onSearchCode = async value => {
    await this.setState({
      name: '',
      invcode_stock: ''
    });
    await this.seachGoods();
  };

  // selected开始  所属公司
  onChange = async value => {
    console.log(value);
    await this.setState({
      attcmp: value,
      myAttcmp: value
    });

    await this.seachGoods();
  };

  seachGoods = async () => {

    this.props.seachGoods(this.state.invcode_stock);

    // await this.props.pageInit();  // 页面恢复
    // const { SEACH_GOODS_DATA, page } = await this.props;
    // const {
    //   invcode_stock,
    //   min_create_at,
    //   max_create_at,
    //   name,
    //   cate_code,
    //   page_size,
    //   attcmp
    // } = this.state;

    // const params = {
    //   invcode_stock,
    //   min_create_at,
    //   max_create_at,
    //   name,
    //   cate_code,
    //   page_size,
    //   attcmp,
    //   page
    // };

    // console.log(params);
    // SEACH_GOODS_DATA(params);

  };

  clearAll = async () => {
    await this.setState({
      invcode_stock: ''
    });
    await this.props.seachGoods('');
  };

  // onBlur = () => {
  //   console.log('blur')
  // }
  //
  // onFocus = () => {
  //   console.log('focus')
  // }

  // selected结束

  render() {
    return (
      <div className='goodsSearchs'>
        {/*<RangePicker value={this.state.myRangePicker} onChange={this.myRangePicker}/>*/}
        {/*<MySelect*/}
        {/*data={this.state.attcmpArr}*/}
        {/*placeholder='请选择所属公司'*/}
        {/*onChange={this.onChange}*/}
        {/*value={this.state.myAttcmp}*/}
        {/*/>*/}

        {/*<Search*/}
        {/*placeholder="请输入商品名称"*/}
        {/*onSearch={this.onSearchName}*/}
        {/*value={this.state.name}*/}
        {/*onChange={this.onSearchNameChange}*/}
        {/*style={{width: 200}}*/}
        {/*/>*/}

        <Search
          placeholder="请输入物料编码"
          // onSearch={this.onSearchInvcode}
          onSearch={() => this.props.seachGoods(this.state.invcode_stock)}
          value={this.state.invcode_stock}
          onChange={(e) => this.setState({invcode_stock: e.target.value})}
          style={{width: 200}}
        />

        {/*<Search*/}
        {/*placeholder="请输入物料组编码"*/}
        {/*onSearch={this.onSearchCode}*/}
        {/*value={this.state.cate_code}*/}
        {/*onChange={this.onSearchCodeChange}*/}
        {/*style={{width: 200}}*/}
        {/*/>*/}

        <Button onClick={this.clearAll}>清除筛选</Button>
      </div>
    );
  }

}

const mapStateToProps = state => state.goodsLibrary;

export default connect(mapStateToProps, action)(Searchs);
